<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue.js"></script>
	</head>
	<body>
		<div id="app">
		  <com @sendmsg="resiveson"></com>
		  <hr />
		  <p>等待来自儿子的消息：-----{{msg}} </p>
		</div>
	<template id="t1">
		<div>
			<input type="text" v-model="str" placeholder="请输入向父组件传递的信息" @keyup="send" />
			<p>向父组件传递的信息是：{{str}}</p>
		</div>
	</template>
	<script>
		
	var vm=new Vue({
		el:"#app",
		data:{
		    msg:''
		},
		methods:{
		    resiveson(data){
				//console.log(data)
				this.msg=data
			}
		},
		components:{
		  com:{
			  template:"#t1",
			  data(){
				  return {
					  str:''
				  }
			  },
			  methods:{
				  send(){
					 this.$emit('sendmsg',this.str) 
				  }
			  }
			  
		  }
		}
	})	
	</script>
<!-- 子向父传递数据
1.找到发射事件的时机（绑定一个事件）
2.在绑定的事件中去发射一个事件：this.$emit('发射的事件名字',要传递给父组件的数据)
3.在父组件中使用的子组件标签上绑定发射的事件名字，
4.在父组件中去定义事件 -->
	
	
	</body>
</html>
